import React from 'react'
import { ComponentPropsType, getComponentConfByType } from '../../../components/QuestionComponents'
import useGetComponentInfo from '../../../hooks/useGetComponentInfo'
// import PropComponent from '../../../components/QuestionComponents/QuestionTitle/PropComponent'
import { useDispatch } from 'react-redux'
import { changeComponentProps } from '../../../store/componentsReducer'

const NoProp: React.FC = () => <div style={{ textAlign: 'center' }}>未选中组件</div>

const ComponentProp: React.FC = () => {
  const { selectedComponent } = useGetComponentInfo()
  const dispatch = useDispatch()
  if (!selectedComponent) {
    return <NoProp />
  }
  const { type, props, isLocked, isHidden } = selectedComponent

  const componentConf = getComponentConfByType(type)
  if (!componentConf) {
    return <NoProp />
  }

  // 传递到各个类型组件的 PropComponent 中,
  // 达到统一更新 redux store 中数据的目的
  function changProps(newProps: ComponentPropsType) {
    if (!selectedComponent) {
      return
    }
    // const { fe_id } = selectedComponent

    dispatch(
      changeComponentProps({
        ...selectedComponent,
        props: newProps,
      })
    )
  }

  const { PropComponent } = componentConf

  return (
    <PropComponent {...props} onChange={changProps} disabled={isLocked || isHidden}></PropComponent>
  )
}

export default ComponentProp
